{% extends "base1.html" %}
{% block body %}
{% include "navbar.html" %}
<section class="hero is-primary is-bold is-large">
  <div class="main_form">
      <div class="container">
		{% if responseData['OrderKeyId'] %}
	   <div class="s-prose js-post-body" itemprop="text">
        <p>Order Detail Status</p>
        <pre class="CodeBlock-pre  language-json">
			<code>
			<span><strong>OrderKeyId :</strong> {{responseData['OrderKeyId']}}</span>	
			<span><strong>Payment Status : </strong> {{responseData['PaymentResponseText']}}</span>
			<span><strong>Payment Response Code: </strong> {{responseData['PaymentResponseCode']}}</span>
			<span><strong>Payment Method: </strong> {{responseData['PaymentMethod']}}</span>
			</code>
			</pre>
        </div>

	  <div class="row">
          <form method="post" name="chatform" id="chatform" >
            <div class="row">
              <div style="clear:both ; margin-left: 15px" class="col-md-12 col-sm-12">
                <p>Check Order Details </p>
                <div style="clear:both ; margin-left: -15px" class="col-md-12 col-sm-6">
                  <div class="address"><input type="text" name="OrderKeyId" placeholder="Please Enter OrderKeyId" id="OrderKeyId" required /> </div>
                </div>                
              </div>
            </div>          
            <div class="row">&nbsp;</div>
				<div style="clear:both;padding:0px;" class="col-md-12 col-sm-12">
					<div class="col-md-4">
						<input class="btn btn-info btn-lg" type="submit" name="submit" style="display: block;color:#00d1b2;background-color:#FFF;">
					</div>
					<!-- <div class="col-md-2">
						<a target ="_blank" href="/orderupdate" class="btn btn-info btn-lg" style="display: block;color:#00d1b2;background-color:#FFF;">Order Update </a> 
					</div> -->
					<div class="col-md-4">
						<a target ="_blank" href="/" class="btn btn-info btn-lg" style="display: block;color:#00d1b2;background-color:#FFF;">New Order Creation</a> 
					</div>
				</div>
			<div class="row">&nbsp;</div>
			<div class="row">&nbsp;</div>
          </form>
        </div>

		<div>
        	<p><b>PayG Order Detail Request JSON</b></p>
        	<pre style="background:#ffffff;color:#000000;padding:15px;border-radius:6px;overflow:auto;">{{ requestBody }}</pre>
      	</div>
		
		<div>
        	<p><b>PayG Order Detail Response JSON</b></p>
        	<pre style="background:#ffffff;color:#000000;padding:15px;border-radius:6px;overflow:auto;">{{ responseData | tojson(indent=4) }}</pre>
      	</div>

		{% elif(responseData) %}
		<div class="s-prose js-post-body" itemprop="text">
			<p>Response PayG</p>
			<pre class="CodeBlock-pre  language-json">
			<code>
			{{responseData}}
			</code>
			</pre>
		</div>

		{% else %}
	  <div class="row">
          <form method="post" name="chatform" id="chatform" >
            <div class="row">
              <div style="clear:both" class="col-md-12 col-sm-12">
                <p> Order Details </p>
                <div class="col-md-12 col-sm-6">
                  <div class="address"><input type="text" name="OrderKeyId" placeholder="Please Enter OrderKeyId" id="OrderKeyId" required /> </div>
                </div>                
              </div>
            </div>          
            <div class="row">&nbsp;</div>
				<div style="clear:both;padding:0px;" class="col-md-12 col-sm-12">
					<div class="col-md-4">
						<input class="btn btn-info btn-lg" type="submit" name="submit" style="display: block;color:#00d1b2;background-color:#FFF;">
					</div>
					<!-- <div class="col-md-2">
						<a target ="_blank" href="/orderupdate" class="btn btn-info btn-lg" style="display: block;color:#00d1b2;background-color:#FFF;">Order Update </a> 
					</div> -->
					<div class="col-md-4">
						<a target ="_blank" href="/" class="btn btn-info btn-lg" style="display: block;color:#00d1b2;background-color:#FFF;">New Order Creation</a> 
					</div>
				</div>
			<div class="row">&nbsp;</div>
			<div class="row">&nbsp;</div>
          </form>
        </div>
		{% endif %}
      </div>
    </div>
</section>
{% endblock %}
{% block scripts %}
<script src="../static/js/scripts.js"></script>
<script type="text/javascript">
function clearField() {
   if(document.getElementById) {
      document.chatform.reset();
   }
}

document.addEventListener("DOMContentLoaded", function () {

    // get value from sessionStorage
    const orderKeyId = sessionStorage.getItem("OrderKeyId");

    // autofill input if value exists
    if (orderKeyId) {
        document.getElementById("OrderKeyId").value = orderKeyId;
    }

});
</script>
{% endblock %}